<template>
  <div>
      <el-card  class="co-middle">
          <el-form :inline="true"  class="demo-form-inline">
             <el-form-item label="派件任务编号:" label-width="100px">
    <el-input v-model="pageing.id" placeholder="请输入派件任务编号" clearable></el-input>
  </el-form-item >
  <el-form-item label="订单编号:" label-width="160px">
      <el-input v-model="pageing.orderId" placeholder="请输入订单编号" clearable></el-input>
  </el-form-item >
   <el-form-item label="所属营业部:"  label-width="160px">
    <template>
      <Treeselect
      style="margin-left:10px;"
       class="treeselect-main"
                v-model="pageing.agencyId"
                :options="tree"
                :normalizer="normalizer"
                placeholder="请选择所属营业部"
                 :append-to-body="true"
              />
     </template>
  </el-form-item>
        </el-form>
        <!--  -->
        <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="签收状态:"  label-width="100px">
                <el-select v-model="pageing.signStatus" placeholder="请选择" clearable>
                <el-option v-for="item in schedulingStatusOptions" :key="item.value" :label="item.label"
                           :value="item.value"/>
              </el-select>
           </el-form-item>
 <el-form-item label="预计完成时间:" label-width="160px">
   <el-date-picker
   style="width:225px"
   align="center"
   @change="change"
   format="yyyy-MM-dd"
   value-format="yyyy-MM-dd"
      v-model="pageing.endTime"
      type="datetimerange"
       range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
     >
    </el-date-picker>
  </el-form-item>
   <el-form-item label="实际完成时间:" label-width="170px">
   <el-date-picker
   style="width:220px"
   align="center"
      v-model="pageing.actualTime"
       @change="change"
   format="yyyy-MM-dd"
   value-format="yyyy-MM-dd"
      type="datetimerange"
       range-separator="至"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
     >
    </el-date-picker>
  </el-form-item>

       </el-form>
       <el-form :inline="true"  class="demo-form-inline">
         <el-form-item label="任务分配状态:"  label-width="100px">
                <el-select v-model="pageing.assignedStatus" placeholder="请选择任务分配状态" clearable>
                <el-option v-for="item in distribution" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
           </el-form-item>
 <el-form-item class="anniu">
    <el-button type="danger" @click="search">搜索</el-button>
    <el-button @click="reset">重置</el-button>
  </el-form-item>
       </el-form>
      </el-card>
      <!--  -->
         <el-card class="tab-item" style="margin-bottom:20px;">
    <el-row type="flex" justify="left">
       <div class="item" :class="{active:!searchText.status}" @click="changeStatus(null)">
          <span>全部 </span>
        </div>
        <div class="item" :class="{active:searchText.status==='1'}" @click="changeStatus('1')" >
          <span>新任务 </span>
        </div>
        <div class="item" :class="{active:searchText.status==='2'}" @click="changeStatus('2')">
          <span>已完成 </span>
        </div>
    </el-row>
  </el-card>
     <el-card>
        <el-row style="margin-bottom:20px;">
           <el-button  type="danger"  >人工分配</el-button>
        </el-row>
        <!-- tab表格 -->
  <el-table  :header-cell-style="{background:'#f8faff',color:'#818693'}"  :data="tableData" tooltip-effect="dark" style="width: 100%" stripe >
    <el-table-column type="selection" width="55px"  fixed="left"  :selectable="selectableFunc" ></el-table-column>
 <el-table-column label="序号" width="50px" type="index" ></el-table-column>
    <el-table-column label="派件作业编号" width="180px"  prop="id"></el-table-column>
      <el-table-column prop="orderId" label="订单编号" width="180" > </el-table-column>
    <el-table-column prop="agencyName" label="所在营业部" width="150px" > </el-table-column>
    <el-table-column prop="status" label="任务分配状态" show-overflow-tooltip width="120px" >
       <template #default="{row}">
             <el-row type="flex" justify="space-between;">
              <div :class="{green: row.assignedStatus ,red: !row.assignedStatus }"></div>
              {{row.assignedStatus===1?'未分配':'已分配'}}
             </el-row>
      </template>
       </el-table-column>
    <el-table-column prop="courierName" label="快递员姓名" width="150px"  > </el-table-column>
  <el-table-column prop="orderId" label="签收状态" width="180" :formatter="signStatus"> </el-table-column>
  <el-table-column prop="orderId" label="签收人" width="180" :formatter="signRecipient"> </el-table-column>
    <el-table-column prop="estimatedStartTime" label="预计开始时间" width="180px" > </el-table-column>
    <el-table-column prop="estimatedEndTime" label="预计完成时间" width="180px" > </el-table-column>
    <el-table-column prop="actualEndTime" label="实际完成时间" width="180px" > </el-table-column>
  </el-table>
   <!-- 分页 -->
       <el-pagination
       class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageing.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageing.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </el-card>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import { treeShapedApi } from '@/api/institution'
import { geDeliveryPageApi } from '@/api/pick'

export default {
  name: 'dispatch-job',
  components: {
    Treeselect
  },
  data () {
    return {
      total: 0,
      tableData: [],
      searchText: {
        status: null
      },
      value1: '',
      tree: [],
      pageing: {
        id: null,
        page: 1,
        pageSize: 10,
        number: null,
        name: null,
        startOrganId: null,
        taskType: null,
        orderId: null,
        agencyId: null,
        estimatedStartTime: '',
        estimatedEndTime: ''
      },
      schedulingStatusOptions: [
        {
          label: '已签收',
          value: 1
        },
        {
          label: '拒收',
          value: 2
        }
      ],
      distribution: [
        {
          label: '已分配',
          value: 1
        },
        {
          label: '待人工分配',
          value: 2
        }
      ]
    }
  },
  created () {
    this.initTree()
    this.getList()
  },
  methods: {
    // 时间处理
    change (row) {
      // console.log(row)

      this.pageing.estimatedStartTime = row[0]
      this.pageing.estimatedEndTime = row[1]
      // console.log(this.pageing.endTime)
      // this.pageing = JSON.parse(JSON.stringify(row))
      // this.$set(this.pageing, [row.endTime, row.actualTime])
      // if (row.endTime) {
      //   // this.pageing.minEstimatedEndTime = this.$moment(this.pageing.endTime[0].format('YYYY-MM-DD HH:mm:ss'))
      //   // this.pageing.maxEstimatedEndTime = this.$moment(this.pageing.endTime[1].format('YYYY-MM-DD HH:mm:ss'))
      // }
      // if (row.actualTime) {
      //   // this.pageing.minActualEndTime = this.$moment(this.pageing.actualTime[0].format('YYYY-MM-DD HH:mm:ss'))
      //   // this.pageing.maxActualEndTime = this.$moment(this.pageing.actualTime[1].format('YYYY-MM-DD HH:mm:ss'))
      //   this.$set(this.pageing, [row.endTime, row.actualTime])
      // }
    },
    selectableFunc (row, index) {
      return false
    },
    async getList () {
      const { data: res } = await geDeliveryPageApi({ ...this.pageing, ...this.searchText })
      console.log(res)
      this.tableData = res.items
      this.form = res.items
      this.total = +res.counts
    },

    search () {
      this.getList()
    },
    reset () {
      this.pageing.id = null
      this.pageing.orderId = null
      this.pageing.agencyId = null
      this.pageing.signStatus = null
      this.pageing.endTime = null
      this.pageing.actualTime = null
      this.pageing.assignedStatus = null
      this.getList()
    },
    normalizer (node) {
      // console.log(node)
      // 当子节点也就是children=[]时候去掉子节点
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children && node.children.length > 0 ? node.children : 0
      }
    },
    // 下拉树形结构
    async initTree () {
      const res = await treeShapedApi()
      this.tree = JSON.parse(res.data)
    },
    // 按钮触发的函数
    async changeStatus (newStatus) {
      this.searchText.status = newStatus
      this.getList()
    },
    handleSizeChange (newSize) {
      this.pageing.pageSize = newSize
      this.getList()
    },
    handleCurrentChange (newPage) {
      this.pageing.page = newPage
      this.getList()
    },
    // 签收状态 signRecipient
    signStatus: function (row) {
      if (row.signStatus === 1) {
        return '已签收'
      } else if (row.signStatus === 0) {
        return '拒收'
      }
    },
    // 签收人
    signRecipient: function (row) {
      if (row.signRecipient === 1) {
        return '本人'
      } else {
        return '非本人'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .vue-treeselect__control {
    // padding-left: 5px;
    // padding-right: 5px;
    display: table;
    table-layout: fixed;
    /* width: 100%; */
    width: 220px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    transition-duration: 200ms;
    transition-property: border-color, box-shadow, width, height, background-color, opacity;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.anniu {
  margin-left: 50px;
}
.tab-item {
    margin-top: 20px;
    ::v-deep .el-card__body {
      padding: 0;
    }

    .item {
      width: 120px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      font-size: 14px;
      cursor: pointer;
      font-weight: bold;

      span {
        font-weight: normal;
      }
    }

    .active {
      background: #ffeeeb;
      color: #e15536;
    }
}
.page {
  text-align: center;
}
.green{
  background-color: #419eff;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  margin-top: 8px;

}
.red{
  background-color: red;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
</style>
